<template>    
    <el-container>
        <el-header>{{mx.name}}</el-header>
        <el-main>
            <p>主页信息</p>
            <el-card class="box-card" style="margin-top: 2px;" v-for="(row, index) in records">
                <div slot="header" class="clearfix">
                    <span>{{row.date}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="delRecord(row, index)">删除</el-button>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="editRecord(row, index)">编辑</el-button>
                </div>
                <div class="text item" v-html="row.content"></div>
            </el-card>
            <!-- 弹出窗口 -->
            <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="80%"
                :before-close="handleClose">
                <div id="show-record-msg"></div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dislogSaveEvnt">确 定</el-button>
                </span>
            </el-dialog>
        </el-main>
    </el-container>
</template>
<script>
    import Main from './main'
    // 运行时参数

    var R = {
        dlgIndex: null             // 弹出框编辑索引
    }
    
    export default {
        // 父子组件传值
        props: ['mx'],
        data(){
            return {
                records: [],      // 数据记录
                dialogVisible: true
            }
        },
        created() {
            // 值改变监听
            this.$watch("mx", (nVal, oVal) => {
                if(nVal.id){
                    Main.getRecord(this, {pid: nVal.id})
                }
            })
        },
        mounted(){
            this.dialogVisible = false
        },
        methods:{
            delRecord(row, index){
                this.$confirm('删除日志记录以后将无法再恢复, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$c.PigeonsGet('aurora/ulog/record/del',
                        {no: row.no},
                        (rs) => {
                            console.log(rs)
                            this.records.splice(index, 1)
                        },
                        (error, httpMK)=>{
                            this.$message({message: error, type: 'warning'});
                        }
                    )
                })
                // .catch(() => {})
            },
            editRecord(row, index){
                this.records[index].edit_mk = true
                this.dialogVisible = true
                var row = this.records[index]
                R.dlgIndex = index
                // tinymce
                var selector = 'show-record-msg'
                tinymce.init({
                    selector: '#' + selector,
                    // plugins: [
                    //     'advlist autolink lists link image charmap print preview anchor',
                    //     'searchreplace visualblocks code fullscreen',
                    //     'insertdatetime media table contextmenu paste code textcolor'
                    // ]
                    height: 300,
                    //theme: 'modern',
                    plugins: [
                        'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
                        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                        'save table contextmenu directionality emoticons template paste textcolor'
                    ]
                    ,toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | preview fullpage | forecolor backcolor emoticons'
                    // ,theme: 'modern'
                    ,skin: 'lightgray'
                    // 汉化
                    ,language:'zh_CN'
                })
                tinymce.get(selector).setContent(row.content)
            },
            // 关闭弹出窗口
            dislogSaveEvnt(){
                console.log(R.dlgIndex)
                if(0 === R.dlgIndex || R.dlgIndex){
                    var content = tinymce.get('show-record-msg').getContent()
                    this.records[R.dlgIndex].content = content
                    console.log(this.records[R.dlgIndex])
                    // 数据保存
                    this.$c.PigeonsPost('aurora/ulog/record/save',
                        this.records[R.dlgIndex],
                        (result)=>{
                            this.$message({
                                showClose: true,
                                message: result.msg,
                                type: 'success'
                            });
                            if(200 == result){
                                //this.$refs[formName].resetFields();
                            }
                        },
                        (error, httpMK)=>{
                            this.$message({
                                showClose: true,
                                message: error,
                                type: 'error'
                            });
                        },
                        ()=>{}
                    )
                }
                
                this.dialogVisible = false
            }
        }
    }
</script>
<style>
.text {
    font-size: 14px;
    text-align: left;
}

.item {
    margin-bottom: 18px;
    margin-left: 0px;
}
.item > p{
    margin: 0px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}
</style>